<template>
  <div>
    <Page auto-content-height>
      <FosoTable
        :tool-bar-button-text="$t('sys.role.addRole')"
        table-title="角色管理"
        table-titlehelp="角色管理帮助"
        @add="openDrawerHandle('add', $event)"
      >
        <!-- 状态列 -->
        <template #status="{ row }">
          <StatusColumn :request-api="updateRole" :row="row" />
        </template>
        <!-- 操作列 -->
        <template #action="{ row }">
          <OperationColumn
            :row="row"
            @delete="DeleteHandle(row)"
            @edit="openDrawerHandle('edit', row)"
          />
        </template>
      </FosoTable>
    </Page>

    <!-- 弹窗框 -->
    <Drawer class="w-[35%]" @refresh="reloadTable" />
    <!-- 权限分配 -->
    <Modal class="h-[60%] w-[30%]" />
  </div>
</template>

<script setup lang="tsx">
import type { MenuInfoPlain } from '#/api/sys/model/menuModel';

import { Page, useVbenDrawer, useVbenModal } from '@vben/common-ui';
import { $t } from '@vben/locales';

import { deleteRole, getRoleList, updateRole } from '#/api/sys/role';
import { OperationColumn } from '#/components/FosoTablePro/index';
import { useFosoTable } from '#/components/FosoTablePro/use-foso-config';
import { useFosoTableConfig } from '#/components/FosoTablePro/use-foso-table';

import ExtraDrawer from './components/drawer.vue';
import ExtraModal from './components/modal.vue';
// 弹窗连接
const [Drawer, drawerApi] = useVbenDrawer({
  // 连接抽离的组件
  connectedComponent: ExtraDrawer,
});
// 权限分配
const [Modal] = useVbenModal({
  // 连接抽离的组件
  connectedComponent: ExtraModal,
});

// 使用 useFosoTable hook 生成配置
const { gridOptions } = useFosoTableConfig({
  columns: [
    {
      type: 'checkbox',
      width: 80,
    },
    {
      title: $t('sys.role.roleName'),
      minWidth: 119,
      field: 'name',
    },
    // {
    //   title: $t('sys.role.roleValue'),
    //   field: 'code',
    // },
    {
      title: $t('sys.role.status'),
      field: 'status',
      minWidth: 120,
      slots: {
        default: 'status',
      },
    },
    {
      title: $t('sys.role.remark'),
      field: 'remark',
      minWidth: 120,
    },

    // 创建时间
    {
      title: $t('sys.role.createTime'),
      field: 'createdAt',
      minWidth: 120,
      formatter: ['formatDate', 'yyyy-MM-dd'],
    },
    // 操作
    {
      title: $t('sys.role.operation'),
      minWidth: 200,
      slots: { default: 'action' },
    },
  ],

  requestApi: getRoleList,
});

const { FosoTable, FosoTableApi } = useFosoTable(gridOptions);
/**
 * @author Buke
 * @description 打开弹窗
 * @param {string} type - 操作类型，'edit' 表示编辑，'add' 表示新增。
 * @param {MenuInfoPlain} row - 要编辑的行数据对象，包含角色相关信息。
 * @returns {void}
 */
const openDrawerHandle = (type: string, row?: MenuInfoPlain): void => {
  if (type === 'edit') {
    drawerApi.setState({ title: $t('sys.role.editRole') });
    drawerApi.setData({ type: 'editData', id: row?.id });
    drawerApi.open(); // 注意弹框打开需要分开，不能用同一个
  }
  if (type === 'add') {
    drawerApi.setState({ title: $t('sys.user.addUser') });
    drawerApi.setData({ type: 'addData' });
    drawerApi.open(); // 注意弹框打开需要分开，不能用同一个
  }
};

/**
 * @author Buke
 * @description 删除角色
 * @param {any} row - 要删除的行数据。
 * @returns {void}
 */
async function DeleteHandle(row: MenuInfoPlain): Promise<void> {
  await deleteRole(row.id as number);
  ElMessage.success($t('common.operateSuccess'));
  FosoTableApi.commitProxy('reload');
}

/**
 * @author Buke
 * @description 处理表格数据加载完成后的操作，如更新表格数据。
 * @returns {void}
 */
const reloadTable = (): void => {
  FosoTableApi.commitProxy('reload');
  drawerApi.close();
};

/**
 * @author Buke
 * @description 分配权限
 */
// const assignPermissions = (row: MenuInfoPlain) => {
//   modalApi.setData({
//     id: row.id,
//   });
//   modalApi.open();
// };
</script>
